<template>
    <div class="aside-container">
        <!-- 标题区域 -->
        <div class="aside-header" :style="{ padding: isCollapse ? '0' : '0 20px' }">
            <el-icon class="logo">
                <UserFilled />
            </el-icon>
            <transition name="fade">
                <h2 v-if="!isCollapse" class="title">人力资源系统</h2>
            </transition>
        </div>

        <!-- 菜单区域 -->
        <el-menu :default-active="activeIndex2" :collapse="isCollapse" class="el-menu-vertical"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false"
            @select="handleMenuClick">
            <el-menu-item index="1">
                <el-icon>
                    <HomeFilled />
                </el-icon>
                <template #title>首页</template>
            </el-menu-item>

            <el-sub-menu index="2">
                <template #title>
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>商品维护</span>
                </template>
                <el-menu-item index="2-1">
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="2-2">
                    <el-icon>
                        <OfficeBuilding />
                    </el-icon>
                    <span>SKU管理</span>
                </el-menu-item>
                <el-menu-item index="2-3">
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <span>考勤管理</span>
                </el-menu-item>
                <el-menu-item index="2-4">
                    <el-icon>
                        <Money />
                    </el-icon>
                    <span>薪水管理</span>
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script setup>
import { UserFilled } from '@element-plus/icons-vue'
import { useAside } from '@/composables/useAside'

const props = defineProps({
    isCollapse: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['add-tab'])

const { 
    activeIndex2, 
    handleMenuClick,
    menuIcons: {
        HomeFilled,
        User,
        Avatar,
        OfficeBuilding,
        Calendar,
        Money
    }
} = useAside(emit)
</script>

<style scoped>
.aside-container {
    height: 100%;
    background-color: #545c64;
}

.aside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    background-color: #434a50;
    transition: all 0.3s ease;
    overflow: hidden;
}

.title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    white-space: nowrap;
}

.logo {
    color: #ffd04b;
    font-size: 24px;
    margin-left: 10px;
}

.el-menu-vertical {
    border-right: none;
    height: calc(100% - 60px);
}

.el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
}

/* 菜单项链接样式 */
.el-menu-item a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 100%;
}

/* 图标与文字间距 */
.el-menu-item .el-icon,
.el-sub-menu .el-icon {
    margin-right: 8px;
}

/* 折叠动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>